<!DOCTYPE html>       
<html>
	<head>
		<meta charset="utf-8">
		<title>垂直方向属性</title>
		<!-- 垂直方向属性 vertical-align
		     功能：1.应用于表格中单元格【栅格布局】
			      2.行内元素与行内块元素对齐方式
				  理解：文本和图片的对齐方式【垂直居中】
				    元素种类
					行内元素：典型的行内元素 span ，a， 文本
					    特点：在一行内显示
					块级元素：典型的块级元素 div p
					    特点：独占一行，可设宽高
					行内块元素：典型行内元素  img
					    特点：在一行内显示，可设宽高
					页面组成：元素之间嵌套生成
					   三种元素相互嵌套  √  嵌套根据元素特点页面混乱
					 嵌套条件1 ：在一行内显示
						              块套行   √  推荐
									  行套行   √  
									  行套块   √  增加条件，块添加宽高,造成页面布局混乱 ×
									  块套块   √
					 嵌套条件2 ：独占一行【效果】
									  块套行   √  推荐
									  行套行   ×  
									  行套块   ×  混乱
									  块套块   √ 
			 -->
	<style>
		/* 抓每个img 
		派生（后代）选择器
		特点：抓取父元素中所有（后代）子元素【元素嵌套特点】
		伪类选择器：
		特点：在选择器后，过滤符合“特定条件”某个元素
		nth-child:选中父元素中第n个
		符合条件：p中包含4个img
		id主要用于抓取父元素：空间大
		class抓取父元素中某个子元素：微调
		*/
		i mg:nth-child(1){
			border: 10px solid red ;
		}
		i mg:nth-child(2){
			border: 20px solid #ff0 ;
		}
		/* 标准抓取每个img方案 */
		p img.baseline{
			vertical-align: baseline;
		}
		p img.top{
			vertical-align: top;
		}
		p img.middle{
			vertical-align: middle;
			/* vertical-align与text-align区别
			区别1：属性值不同
			   2：vertical-align操作文本和图片垂直
			      text-align操作文本左右和居中以及两边对齐*/
		}
		p img.bottom{
			vertical-align: bottom;
		}
	</style>				 
	</head>
	<body>
		
		<h1>垂直方向属性使用【针对元素种类】</h1>
		<p>鹏程万里<img class="baseline" src="img/1.png" alt="鹏程万里" width="300px" height="300px" />基线对齐</p>
		<p>动漫哪吒<img class="top" src="img/2.png" alt="动漫哪吒" width="300px" height="300px"/>顶部对齐</p>
		<p>歪嘴笑<img class="middle" src="img/3.png" alt="歪嘴笑"width="300px" height="300px" />中间对齐</p>
		<p>呲牙笑<img class="bottom" src="img/4.png" alt="呲牙笑"width="300px" height="300px" />底部对齐</p>
		
		<!-- 需求：垂直方向属性  4个属性值
		     如果，不改变现有html结构，可以找到依次4个img
			 抓每个--4个图片
			 思路：派生选择器+伪类选择器-->
	</body>
</html>